// pages/dataCenter/dataCenter.js
import * as echarts from '../../ec-canvas/echarts.min.js';
const app = getApp();
var dataList = []
const time = require('../../utils/time');
Page({
    /**
     * 页面的初始数据
     */
    data: {
        list: [{
            deal: 0,
            name: '今日成交',
            img: 'https://api.yipaiju.com/resources/images/wawa/sj_1.png',
            url: '../today/today?status=1',
            color: '#55fbdb'
        }, {
            deal: 0,
            name: '今日新增',
            img: 'https://api.yipaiju.com/resources/images/wawa/sj_2.png',
            url: '../today/today?status=2',
            color: '#55A4FB'
        }, {
            deal: 0,
            name: '今日结束',
            img: 'https://api.yipaiju.com/resources/images/wawa/sj_3.png',
            url: '../today/today?status=3',
            color: '#55CAFB'
        }, {
            deal: 0,
            name: '无人报名',
            img: 'https://api.yipaiju.com/resources/images/wawa/sj_4.png',
            url: '../today/today?status=4',
            color: '#DA55FB'
        }],
        ec: {
            // onInit: initChart,
            lazyLoad: true // 延迟加载
        },
        province: null,
        city: null,
        district: null,

    },
    navTo(e) {
        var that = this;
        var index = e.currentTarget.dataset.index;
        var url = that.data.list[index].url + "&province="+that.data.province+"&city="+that.data.city+"&district=";
        wx.navigateTo({
            url: url
        })
    },
    api(data) {
        let that = this;

    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        this.echartsComponnet = this.selectComponent('#mychart');
        this.getData(); //获取数据
    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {

    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {
        let that = this;
        var data = {};
        data.longitude = app.globalData.longitude
        data.latitude = app.globalData.latitude
        app.ports.dataCenter({
            data
        }).then((res) => {
            var res = res.data;
            that.data.list[0].deal = res.aggregations.aggs_today.deal_today.doc_count;
            that.data.list[1].deal = res.aggregations.added_today.doc_count;
            that.data.list[2].deal = res.aggregations.aggs_today.failed_today.doc_count;
            that.data.list[3].deal = res.aggregations.participants.no_participant.doc_count;
            app.globalData.dataCenter = res.aggregations.aggs_week.dayOfWeek.buckets
            console.log(app.globalData.dataCenter)
            that.setData({
                list: that.data.list
            })
        })
    },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {

    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {

    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {

    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {

    },
   
    getData: function () {
        var that = this;
        /**
         * 此处的操作：
         * 获取数据json
         */
        var data = {};
        data.longitude = app.globalData.longitude
        data.latitude = app.globalData.latitude
        app.ports.dataCenter({
            data
        }).then((res) => {
            var res = res.data;
            that.data.list[0].deal = res.aggregations.aggs_today.deal_today.doc_count;
            that.data.list[1].deal = res.aggregations.added_today.doc_count;
            that.data.list[2].deal = res.aggregations.aggs_today.failed_today.doc_count;
            that.data.list[3].deal = res.aggregations.participants.no_participant.doc_count;
            this.init_echarts(); //初始化图表
            that.dataList = res.aggregations.aggs_week.dayOfWeek.buckets
            
            for(let i = 0; i < res.aggregations.aggs_week.dayOfWeek.buckets.length;i++){
                console.log()
                
                if(i == res.aggregations.aggs_week.dayOfWeek.buckets.length - 1){
                    console.log(7-i)
                }
            }
            that.setData({
                list: that.data.list,
                province: res.data.local.province,
                city: res.data.local.city,
                district: res.data.local.district,
            })
        })
    },
    //初始化图表
    init_echarts: function () {
        this.echartsComponnet.init((canvas, width, height) => {
            // 初始化图表
            const Chart = echarts.init(canvas, null, {
                width: width,
                height: height
            });
            Chart.setOption(this.getOption());
            // 注意这里一定要返回 chart 实例，否则会影响事件处理等
            return Chart;
        });
    },
    getOption: function () {
        var that = this;
        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '一周好房数据',
                x: 'left',
                y: 'top'
            },
            dataZoom: [
                {   // 这个dataZoom组件，默认控制x轴。
                    type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
                    start: 0,     
                    end: 100     
                }
            ],
            // 悬浮图标
    tooltip: {
        show: true,
        trigger: 'axis',
        //这一步的效果是当你的光标在左边的时候，悬浮标题在右边，在右边的时候，悬浮标题在左边
        position: function (pos, params, dom, rect, size) {
          var obj = { top: 60 };
          obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;
          return obj;
        }
      },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                axisLine: {
                    lineStyle: {
                        color: "#40ca3f",
                    }
                },
                axisLine: {
                    show: false
                },
            },
            yAxis: {
                type: 'value',
                //设置坐标轴字体颜色和宽度
                axisLine: {
                    lineStyle: {
                        color: "#000",
                    }
                },
                axisLine: {
                    show: false
                },
                textclolor: '#000'
            },
            visualMap: {
                type: 'piecewise',
                show: false,
                dimension: 0,
                seriesIndex: 0,
                pieces: [{
                    gt: 1,
                    lt: 3,
                    color: 'rgba(0, 180, 0, 0.5)'
                }, {
                    gt: 5,
                    lt: 7,
                    color: 'rgba(0, 180, 0, 0.5)'
                }]
            },
            series: [{
                type: 'line',
                smooth: 0.6,
                itemStyle: {
                    normal: {
                        color: "#40ca3f",
                        lineStyle: {
                            color: "#40ca3f",
                            width: 5
                        }
                    },
                    emphasis: {
                        itemStyle: {
                            // 高亮时点的颜色
                            color: 'white'
                        },
                        label: {
                            show: true,
                            // 高亮时标签的文字
                        }
                    },
                },
                data: [
                    [app.timeFormat(that.dataList[0].key_as_string,false,false,false,true), that.dataList[0].doc_count],
                    [app.timeFormat(that.dataList[1].key_as_string,false,false,false,true), that.dataList[1].doc_count],
                    [app.timeFormat(that.dataList[2].key_as_string,false,false,false,true), that.dataList[2].doc_count],
                    [app.timeFormat(that.dataList[3].key_as_string,false,false,false,true), that.dataList[3].doc_count],
                    [app.timeFormat(that.dataList[4].key_as_string,false,false,false,true), that.dataList[4].doc_count],
                    [app.timeFormat(that.dataList[5].key_as_string,false,false,false,true), that.dataList[5].doc_count],
                    [app.timeFormat(that.dataList[6].key_as_string,false,false,false,true), that.dataList[6].doc_count]
                ]
            }]
        }
        return option;
    },

})